

<template>
  <view class="Mall4j sku-selected-con">
    <!-- 已选规格 -->
    <view v-if="pageType" class="sku" @tap="showSku">
      <!--      <view class="sku-tit">{{ i18n.selected }}</view>-->
      <!--      <view class="sku-con">-->
      <!--        <block v-for="(skuItem,index) in selectedPropShowList" :key="index">-->
      <!--          <text decode="true">{{ index < selectedPropShowList.length-1 ? skuItem +'，' : skuItem + '&nbsp; &nbsp;' }}</text>-->
      <!--        </block>-->
      <!--        <text>{{ prodNum }}{{ i18n.piece }}</text>-->
      <!--      </view>-->
      <!--      <view class="more">...</view>-->
      <view class="box_4 flex-col">
        <view class="group_2 flex-row justify-between">
          <view class="text-wrapper_5 clamp_text">
            <text class="text_8">规格：</text>
            <block v-for="(skuItem,index) in selectedPropShowList" :key="index">
              <text decode="true" class="text_9">
                {{ index < selectedPropShowList.length - 1 ? skuItem + '，' : skuItem + '&nbsp; &nbsp;' }}
              </text>
            </block>
            <text class="text_9">{{prodNum}}{{ i18n.piece }}</text>
          </view>
          <text class="arrow" style="   top: 16rpx; right: -4rpx;">
          </text>

          <!-- <image class="thumbnail_2" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/more2.png" /> -->
        </view>
        <view class="group_3 clamp_text flex-row">
          <text class="text_10">配送：</text>
          <image v-if="deliveryModeVO['hasShopDelivery']" class="thumbnail_3" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/allow.png" />
          <text v-if="deliveryModeVO['hasShopDelivery']" class="text_11">快递配送</text>
          <image v-if="deliveryModeVO['hasUserPickUp']" class="thumbnail_4" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/allow.png" />
          <text v-if="deliveryModeVO['hasUserPickUp']" class="text_12">到店自提</text>
        </view>
      </view>
    </view>
    <!-- 已选规格end -->

    <!-- 规格弹窗 -->
    <view v-if="skuShow || (!skuShow && !pageType)" class="pup-sku">
      <view class="pup-sku-main" @tap.stop="empty">
        <view class="pup-sku-header">
          <view class="close" @tap="closePopup" />
          <view class="pup-sku-img">
            <image v-if="defaultSku.pic" :src="defaultSku.pic" mode="aspectFit" />
            <image v-else-if="pic" :src="pic" mode="aspectFit" />
            <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
          </view>
          <view class="pup-sku-prod">
            <!-- 秒杀商品价格 -->
            <view v-if="findSku && skuShowType === 0 && pageType === 2" class="pup-sku-price">￥
              <text class="pup-sku-price-int">{{ parsePrice(defaultSku.seckillPrice)[0] }}</text>
              .{{ parsePrice(defaultSku.seckillPrice)[1] }}
            </view>
            <!-- 商品价格 -->
            <view v-if="findSku && skuShowType === 0 && pageType !== 2" class="pup-sku-price">￥
              <text class="pup-sku-price-int">{{ parsePrice(defaultSku.matchingPrice || defaultSku.price)[0] }}</text>
              .{{ parsePrice(defaultSku.matchingPrice || defaultSku.price)[1] }}
              <text v-if="defaultSku.skuScore && prodType===3" class="pup-sku-price-int">+{{ defaultSku.skuScore }}{{ i18n.points }}</text>
            </view>
            <!-- 拼团商品价格 -->
            <view v-if="findSku && skuShowType === 1" class="pup-sku-price">￥
              <text class="pup-sku-price-int">{{ parsePrice(defaultGroupSku.actPrice || defaultSku.actPrice)[0] }}</text>
              .{{ parsePrice(defaultGroupSku.actPrice || defaultSku.actPrice)[1] }}
            </view>
            <view v-if="!findSku" class="pup-sku-price">{{ i18n.outOfStock }}</view>
            <view class="pup-sku-prop">
              <view>
                <text>{{ i18n.selected }}：</text>
                <text decode="true">
                  <text v-if="defaultSku.skuName">{{ '&nbsp;' + defaultSku.skuName }}</text>
                  <text v-else>
                    {{ '&nbsp;' + selectedPropShowList.join('，') }}
                  </text>
                  <text v-if="leastNum && comboId">{{ '&nbsp;'+leastNum+'&nbsp;' }}{{ i18n.piece }}</text>
                  <text v-if="!isBasket">{{ '&nbsp;' + prodNum }}{{ i18n.piece }}</text>
                </text>
              </view>
              <view v-if="findSku && !isJionGroup">
                <text>{{ i18n.inventory }}：</text>
                <text decode="true">{{ '&nbsp;&nbsp;'+ (prodType === 2 && (defaultSku.seckillStocks === 0 || defaultSku.seckillStocks) ? defaultSku.seckillStocks : defaultSku.stocks) }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="pup-sku-body">
          <view v-if="isInputing" class="input-mask" @tap="handleSetVirtualInputInfo" />
          <!-- 说明（虚拟商品） -->
          <view v-if="mold === 1 && (virtualInfo.writeOffNum !== 0 || (virtualInfo.writeOffNum === 0 && virtualInfo.isRefund === 0))" class="virtual-goods-tips">
            <text class="vi-t">{{ i18n.usageInstructions }}：</text>
            <!-- writeOffNum 0无需核销 1单次核销 -1多次核销 -->
            <block v-if="virtualInfo.writeOffNum !== 0">
              <!-- writeOffTime核销有效期 -1.长期有效 0.自定义 x.x天内有效 -->
              <text v-if="virtualInfo.writeOffTime === -1">{{ i18n.longTermValidity }}</text>
              <text v-else-if="virtualInfo.writeOffTime === 0">{{ i18n.afterPurchase }} {{ virtualInfo.writeOffStart }} {{ i18n.to }} {{ virtualInfo.writeOffEnd }} <text v-if="!isEn">{{ i18n.effective }}</text></text>
              <text v-else-if="virtualInfo.writeOffTime === 1">{{ i18n.validOnTheSameDay }}</text>
              <text v-else>{{ i18n.purchase }}{{ virtualInfo.writeOffTime }}{{ i18n.validDay }}</text>
            </block>
            <!-- isRefund 0不支持退款 1支持退款 -->
            <text v-if="virtualInfo.isRefund === 0"><text v-if="virtualInfo.writeOffNum !== 0 ">，</text>{{ i18n.refundsAreNotAllowed }}</text>
          </view>

          <!-- 规格 -->
          <view class="pup-sku-area">
            <view v-if="skuList.length" class="sku-box">
              <view v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
                <view v-for="(skuLine, key) in skuGroupItem" :key="key" class="items sku-text">
                  <text class="sku-kind">{{ key }}</text>
                  <view class="con">
                    <text v-for="skuLineItem in skuLine" :key="skuLineItem" class="sku-choose-item" :class="['item-item',selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
                               isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']" @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)">{{ skuLineItem }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 数量 -->
          <view v-if="pageType || isJionGroup" class="pup-sku-count">
            <view class="count-name">{{ i18n.quantity }}</view>
            <view class="num-wrap">
              <view class="minus" @tap="onCountMinus">
                <text class="row" />
              </view>
              <view class="text-wrap">
                <input ref="prodNumSelf" type="number" :value="prodNumSelf" @input="prodNumInp"></input>
              </view>
              <view class="plus" @tap="onCountPlus">
                <text class="row" />
                <text class="col" />
              </view>
            </view>
          </view>
          <!-- 留言（虚拟商品） -->
          <view v-if="mold===1" class="pup-sku-count virtual-goods-msg">
            <view v-for="(item, index) in virtualInfo.virtualRemarks" :key="index" class="msg-item">
              <view class="msg-tit"><text v-if="item.isRequired" class="stress">*</text>{{ item.name }}</view>
              <input v-model="item.value" class="msg-int" :placeholder="i18n.pleaseEnter + `${item.name}`" maxlength="20" @focus="inputFocus" @blur="handleSetVirtualInputInfo">
            </view>
          </view>
        </view>
        <!-- 底部按钮 -->
        <view v-if="pageType || isJionGroup" :class="'pup-sku-footer ' + ( isJionGroup ? '' : findSku && !prodNumBiggerThanStock() ? '':'gray')">
          <!-- 秒杀按钮 -->
          <view v-if="pageType===2" class="btn buy" @tap="handleBuyNow">{{ i18n.immediatelyBuy }}</view>
          <view v-if="pageType===1 && seckillType === 0" class="btn pre-sale-buy cart-footer" @tap="handleBuyNow">{{ i18n.retailPricePurchase }}</view>
          <!-- 非秒杀、非预售商品 -->
          <block v-if="skuShowType==0 && preSellStatus != 1 && pageType !==2 && seckillType !== 0">
            <view v-if="skuShowType == 0 && mold !== 1" class="btn cart" @tap="handleAddToCart">{{ i18n.addShoppingCart }}</view>
            <view v-if="skuShowType==0" class="btn buy" @tap="handleBuyNow">{{ i18n.buyNow }}</view>
          </block>
          <!-- 预售 -->
          <view v-if="preSellStatus == 1" class="btn pre-sale-buy" @tap="handleBuyNow">{{ i18n.buyNow }}</view>
          <!-- 开团按钮 -->
          <view v-if="skuShowType==1 && !isJionGroup" :class="['btn buy', groupActivity.activityStatus === 1 ? 'gray-btn' : '']" @tap="handleGroupConfirmOrder">{{ i18n.startAGroup }}
          </view>
          <!-- 参团按钮 -->
          <view v-if="isJionGroup" class="btn buy" @tap="handleJionGroup">
            {{ i18n.JoinGroupNow }}
          </view>
          <!-- 积分商品-兑换按钮 -->
          <view v-if="pageType == 3" class="pup-sku-footer" :class="{gray: !findSku}">
            <view class="btn buy" @tap="handleBuyNow">{{ i18n.redeemNow }}</view>
          </view>
        </view>
        <!-- 活动商品 -->
        <view v-if="prodType == 5 && pageType" class="pup-sku-footer gray">
          <view class="btn buy">{{ i18n.notAvailableForPurchase }}</view>
        </view>
        <view v-if="!pageType && !isJionGroup" class="pup-sku-footer" :class="{gray: !findSku}">
          <view class="btn buy" @tap="submit">{{ i18n.confirm }}</view>
        </view>
      </view>
    </view>
    <!-- 规格弹窗 end -->
  </view>
</template>

<script>
var config = require('../../utils/config.js')

export default {
  props: {
    pic: {
      type: String,
      default: ''
    },
    deliveryModeVO: {
      // type: Object,
      // default:{
      //   hasShopDelivery: false,
      //   hasCityDelivery: false,
      //   hasUserPickUp: false
      // }
    },
    isMain: {
      type: Boolean,
      default: false
    },
    leastNum: {
      type: Number,
      default: 0
    },
    skuName: {
      type: String,
      default: ''
    },
    skuList: {
      type: Array,
      default () {
        return []
      }
    },
    skuId: {
      type: Number,
      default: 0
    },
    comboId: {
      type: Number,
      default: 0
    },
    defaultPrice: {
      type: Number,
      default: 0
    },
    mold: {
      type: [Number, String],
      default: 0
    },
    virtualInfo: {
      type: Object,
      default: () => { }
    },
    skuShowType: {
      type: Number,
      default: 0
    },
    prodType: {
      type: Number,
      default: 0
    },
    preSellStatus: {
      type: Number,
      default: 0
    },
    prodNum: {
      type: Number,
      default: 1
    },
    maxNum: {
      type: Number,
      default: 1
    },
    hasMaxNum: {
      type: [Number, Boolean],
      default: 0
    },
    groupActivity: {
      type: Object,
      default: () => { }
    },
    // 页面类型: 0非商品详情页(套餐/团购详情:参团页面)  1普通商品(团购)  2秒杀商品  3积分商品  5活动商品 6购物车
    pageType: {
      type: Number,
      default: 0
    },
    skuShow: {
      type: Boolean,
      default: false
    },
    // 参团页面
    isJionGroup: {
      type: Boolean,
      default: false
    },
    // 是否购物车
    isBasket: {
      type: Boolean,
      default: false
    },
    isCpicUrl: {
      type: Boolean,
      default: false
    },
    seckillType: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      // 是否为英文
      isEn: uni.getStorageSync('lang') == 'en',
      defaultSku: '',

      propKeys: [],
      selectedPropObj: {},
      skuGroup: {},
      allProperties: [],
      findSku: false,

      skuGroupList: [],
      selectedPropObjList: [],
      selectedProperties: '',
      selectedPropList: [],
      selectedPropShowList: [],
      isInputing: false,

      // 团购sku
      defaultGroupSku: {}
    }
  },
  computed: {
    i18n () {
      return this.$t('index')
    },
    prodNumSelf: {
      get () {
        return this.prodNum
      },
      set () { }
    }
  },
  mounted () {
    this.groupSku()
    console.log("this.deliveryModeVO")
    console.log(this.deliveryModeVO)
    console.log("this.deliveryModeVO")
  },
  methods: {
    closePopup () {
      this.$emit('closeSkuPop')
    },
    groupSku () {
      this.skuList.forEach((item) => {
        if (item.pic) {
          item.pic = item.pic.indexOf('http') < 0 ? config.picDomain + item.pic : item.pic
        }
      })
      const skuList = this.skuList
      if (skuList.length == 1 && !skuList[0].properties) {
        this.defaultSku = skuList[0]
        this.findSku = true
        if (this.pageType || this.isJionGroup) {
          this.$emit('setSku', this.defaultSku, this.findSku)
        }
        if (this.groupActivity && this.groupActivity.status) {
          this.setDefaultGroupSku()
        }
        return
      }
      const skuGroupList = []
      const skuGroup = {}
      const allProperties = []
      const propKeys = []
      const selectedPropObj = {}
      const selectedPropObjList = []

      var defaultSku = null
      for (var i = 0; i < skuList.length; i++) {
        var isDefault = false
        if ((!defaultSku && skuList[i].skuId == this.skuId) ||
          (!defaultSku && skuList[i].price == this.defaultPrice) ||
          (!defaultSku && skuList[i].seckillPrice === this.defaultPrice) ||
          (!defaultSku && skuList[i].actPrice === this.defaultPrice)) {
          defaultSku = skuList[i]
          isDefault = true
        }
        var properties = skuList[i].properties // 版本:公开版;颜色:金色;内存:64GB
        allProperties.push(properties)
        var propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]

        for (var j = 0; j < propList.length; j++) {
          var propval = propList[j].split(':') // ["版本","公开版"]
          var props = skuGroup[propval[0]] // 先取出 版本对应的值数组

          // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
          if (isDefault) {
            propKeys.push(propval[0])
            selectedPropObj[propval[0]] = propval[1]
            const selectedPropObjItem = {}
            selectedPropObjItem[propval[0]] = propval[1]
            selectedPropObjList.push(selectedPropObjItem)
          }

          if (props == undefined) {
            props = [] // 假设还没有版本，新建个新的空数组
            props.push(propval[1]) // 把 "公开版" 放进空数组
          } else {
            if (props.indexOf(propval[1]) === -1) { // 如果数组里面没有"公开版"
              props.push(propval[1]) // 把 "公开版" 放进数组
            }
          }
          skuGroup[propval[0]] = props // 最后把数据 放回版本对应的值
          const propListItem = {}
          propListItem[propval[0]] = props
          skuGroupList.push(propListItem)
        }
      }
      this.defaultSku = defaultSku
      this.propKeys = propKeys
      this.selectedPropObj = selectedPropObj
      this.skuGroup = skuGroup
      this.selectedPropObjList = selectedPropObjList
      this.skuGroupList = this.unique(skuGroupList)
      this.allProperties = allProperties
      this.parseSelectedObjToVals(skuList)
      this.$forceUpdate()
      if (this.groupActivity && this.groupActivity.status) {
        this.setDefaultGroupSku()
      }
    },

    /**
     * 将已选的 {key:val,key2:val2}转换成 [val,val2]
     */
    parseSelectedObjToVals: function (skuList) {
      const selectedPropObjList = this.selectedPropObjList
      let selectedProperties = ''
      const selectedPropList = []
      const selectedPropShowList = []
      for (let i = 0; i < selectedPropObjList.length; i++) {
        const selectedPropObjItem = selectedPropObjList[i]
        for (const key in selectedPropObjItem) {
          if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
            selectedPropList.push(key + ':' + selectedPropObjItem[key])
            selectedPropShowList.push(selectedPropObjItem[key])
            selectedProperties += key + ':' + selectedPropObjItem[key] + ';'
          }
        }
      }
      selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1)
      this.selectedPropList = selectedPropList
      this.selectedPropShowList = selectedPropShowList
      this.selectedProperties = selectedProperties
      this.selectedPropObjList = selectedPropObjList
      var findSku = false
      for (var i = 0; i < skuList.length; i++) {
        if (skuList[i].properties == selectedProperties) {
          findSku = true
          this.defaultSku = skuList[i]
          break
        }
      }
      this.findSku = findSku
      if (this.pageType || this.isJionGroup) {
        this.$emit('setSku', this.defaultSku, this.findSku)
      }
      if (this.groupActivity && this.groupActivity.status) {
        this.setDefaultGroupSku()
      }
    },

    showSku () {
      this.$emit('showSku')
    },

    /**
     * 判断当前的规格值 是否可以选
     */
    isSkuLineItemNotOptional (allProperties, propObj, key, item, propKeys) {
      var selectedPropObj = Object.assign({}, propObj)
      var properties = ''
      selectedPropObj[key] = item
      for (let j = 0; j < propKeys.length; j++) {
        properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
      }
      properties = properties.substring(0, properties.length - 1)
      for (let i = 0; i < allProperties.length; i++) {
        if (properties == allProperties[i]) {
          return false
        }
      }
      for (let i = 0; i < allProperties.length; i++) {
        if (allProperties[i].indexOf(item) >= 0) {
          return true
        }
      }
      return false
    },

    /**
     * 规格点击事件
     */
    toChooseItem (skuGroupItemIndex, skuLineItem, key) {
      this.selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
      this.selectedPropObj[key] = skuLineItem
      this.parseSelectedObjToVals(this.skuList)
      if (this.pageType || this.isJionGroup) {
        this.$emit('setSku', this.defaultSku, this.findSku)
      }
      if (this.groupActivity && this.groupActivity.status) {
        this.setDefaultGroupSku()
      }
    },

    /**
     * 设置选中的拼团sku
     */
    setDefaultGroupSku () {
      const groupSkuList = this.groupActivity.groupSkuList
      if (groupSkuList) {
        if (groupSkuList.length === 1 && !groupSkuList[0].properties) {
          this.defaultGroupSku = groupSkuList[0]
          this.$emit('setSku', this.defaultGroupSku, this.findSku)
          return
        }
        for (var i = 0; i < groupSkuList.length; i++) {
          if (groupSkuList[i].properties == this.selectedProperties) {
            this.defaultGroupSku = groupSkuList[i]
            this.$emit('setSku', this.defaultGroupSku, this.findSku)
            break
          }
        }
      }
    },

    /**
     * 去重
     */
    unique (arr) {
      const map = {}
      arr.forEach(item => {
        const obj = {}
        Object.keys(item).sort().map(key => {
          obj[key] = item[key]
        })
        map[JSON.stringify(obj)] = item
      })
      return Object.keys(map).map(key => JSON.parse(key))
    },

    /**
     * 减数量
     */
    onCountMinus: function () {
      var prodNum = this.prodNumSelf
      if (prodNum > 1) {
        prodNum = prodNum - 1
      }
      this.$emit('setProdNum', prodNum)
    },

    /**
     * 加数量
     */
    onCountPlus: function () {
      // 商品数量
      let prodNum = parseInt(this.prodNumSelf)
      // 默认库存数量
      const defaultSkuStock = parseInt(this.pageType === 2 ? this.defaultSku.seckillStocks : this.defaultSku.stocks)
      // 是否限购
      const isRestriction = this.maxNum && this.maxNum !== -1 && (this.pageType === 2 || this.skuShowType === 1)
      // limit 最大可购买数量: 活动商品不限购则为当前sku库存；活动商品限购时，当库存大于限购数量则为限购数量，否则为库存数量
      const limit = !isRestriction ? defaultSkuStock : defaultSkuStock > this.maxNum ? this.maxNum : defaultSkuStock
      if (isRestriction) {
        if (prodNum >= limit) {
          uni.showToast({
            title: isRestriction && limit ? `${this.i18n.purchaseLimit} ${this.maxNum} ${this.i18n.piece}` : this.i18n.insufficientStock,
            icon: 'none'
          })
        }
        prodNum = (prodNum >= limit ? limit : prodNum + 1) || 1
      } else {
        if (prodNum >= defaultSkuStock) {
          uni.showToast({
            title: this.i18n.insufficientStock,
            icon: 'none'
          })
          prodNum = defaultSkuStock || 1
        } else {
          prodNum += 1
        }
      }
      this.$emit('setProdNum', prodNum)
    },

    /**
     * 加购
     */
    handleAddToCart () {
      if (!this.findSku || this.prodNumBiggerThanStock()) {
        uni.showToast({
          title: '库存为0',
          icon: 'none'
        })
        return
      }
      this.$emit('addToCart')
    },

    /**
     * 立即购买
     */
    handleBuyNow () {
      if (!this.findSku || this.prodNumBiggerThanStock()) {
        return
      }
      this.$emit('buyNow')
    },

    /**
     * 开团
     */
    handleGroupConfirmOrder () {
      if (!this.findSku || this.prodNumBiggerThanStock()) {
        return
      }
      this.$emit('groupConfirmOrder')
    },

    /**
     * 参团
     */
    handleJionGroup () {
      if (!this.findSku || this.prodNumBiggerThanStock()) {
        return
      }
      this.$emit('groupConfirmOrder')
    },

    /**
     * 库存校验
     * @return {Boolean} 购买数量大于库存
     */
    prodNumBiggerThanStock () {
      const defaultSkuStock = this.pageType == 2 ? this.defaultSku.seckillStocks : this.defaultSku.stocks
      return this.prodNumSelf > defaultSkuStock
    },

    /**
     * 输入框聚焦
     */
    inputFocus () {
      this.isInputing = true
    },

    /**
     * 设置虚拟商品留言
     */
    handleSetVirtualInputInfo () {
      this.isInputing = false
      this.$emit('setVirtualInputInfo', this.virtualInfo.virtualRemarks)
    },

    /**
     * 输入商品数量
     */
    prodNumInp (e) {
      let num = Number(e.detail.value.replace(/[^\d]/g, ''))
      const max = this.prodType === 2 && (this.defaultSku.seckillStocks === 0 || this.defaultSku.seckillStocks) ? this.defaultSku.seckillStocks : this.defaultSku.stocks
      if (num > max) {
        num = max
      } else if (num < 1) {
        num = 1
      }
      this.$refs.prodNumSelf.valueSync = num
      this.$emit('setProdNum', num)
    },

    submit () {
      if (this.findSku) {
        this.$emit('setSku', this.defaultSku, this.isMain, this.findSku)
      }
    },

    /**
     * 金额处理
     */
    parsePrice (val) {
      if (!val) {
        val = 0
      }
      return val.toFixed(2).split('.')
    },

    /**
     * 空方法
     */
    empty () { }
  }
}
</script>

<style scoped lang="scss">
@import "./index.css";
.box_4 {
  background-color: rgba(255, 255, 255, 1);
  //height: 172.67441860465115rpx;
  margin-top: 20.930232558139537rpx;
  width: 100%;
  padding: 27rpx 34rpx;
  .group_2 {
    height: 64.53488372093024rpx;
    position: relative;
    .text-wrapper_5 {
      width: 600rpx;
      height: 40.116279069767444rpx;
      overflow-wrap: break-word;
      font-size: 0;
      font-family: Source Han Sans-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 40.116279069767444rpx;
      .text_8 {
        width: 470.93023255813955rpx;
        height: 40.116279069767444rpx;
        overflow-wrap: break-word;
        color: rgba(17, 17, 17, 1);
        font-size: 27.906976744186046rpx;
        font-family: Source Han Sans-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 40.116279069767444rpx;
      }
      .text_9 {
        width: 470.93023255813955rpx;
        height: 40.116279069767444rpx;
        overflow-wrap: break-word;
        color: rgba(153, 153, 153, 1);
        font-size: 27.906976744186046rpx;
        font-family: Source Han Sans-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        line-height: 40.116279069767444rpx;
      }
    }
    .thumbnail_2 {
      width: 27.906976744186046rpx;
      height: 27.906976744186046rpx;
      position: relative;
      top: 10rpx;
      right: -7rpx;
    }
  }
  .group_3 {
    height: 40.116279069767444rpx;
    margin: 10.465116279069768rpx 0 20rpx 0rpx;
    .text_10 {
      width: 83.72093023255815rpx;
      height: 40.116279069767444rpx;
      overflow-wrap: break-word;
      color: rgba(17, 17, 17, 1);
      font-size: 27.906976744186046rpx;
      font-family: Source Han Sans-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 40.116279069767444rpx;
    }
    .thumbnail_3 {
      width: 27.906976744186046rpx;
      height: 27.906976744186046rpx;
      margin: 6.976744186046512rpx 0 0 1.744186046511628rpx;
    }
    .text_11 {
      width: 118.6046511627907rpx;
      height: 40.116279069767444rpx;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 27.906976744186046rpx;
      font-family: Source Han Sans-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 40.116279069767444rpx;
      margin-left: 3.488372093023256rpx;
    }
    .thumbnail_4 {
      width: 27.906976744186046rpx;
      height: 27.906976744186046rpx;
      margin: 6.976744186046512rpx 0 0 13.953488372093023rpx;
    }
    .text_12 {
      width: 111.62790697674419rpx;
      height: 40.116279069767444rpx;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 27.906976744186046rpx;
      font-family: Source Han Sans-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 40.116279069767444rpx;
      margin-left: 3.488372093023256rpx;
    }
  }
}
</style>
